<template>
  <el-dialog v-if="fileDialogVisible" :visible.sync="fileDialogVisible" width="70%">
    <div class="dialog-body" style="height: 500px; overflow: auto; position: relative">
      <!-- 渲染excel容器 -->
      <div
        class="table-html-wrap"
        v-if="currentFileType == 'xlsx'"
        v-html="tableHtml"
        style="position: absolute; top: 0"
      ></div>
      <!-- 渲染word的容器 -->
      <div v-else-if="currentFileType == 'docx'" ref="file"></div>
      <!-- 渲染pdf容器 -->
      <pdf v-else-if="currentFileType == 'pdf'" ref="pdf" :src="pdfUrl" style="width: 100%" />
      <!-- 渲染img -->
      <img v-else-if="currentFileType == 'img'" :src="viewImgUrl" />
    </div>
  </el-dialog>
</template>

<script>
  import axios from 'axios';
  import * as docx from 'docx-preview';
  import * as XLSX from 'xlsx';
  import pdf from 'vue-pdf';
  import path from 'path';
  window.JSZip = require('jszip');
  export default {
    data() {
      return {
        fileDialogVisible: false,
        tableHtml: '',
        pdfUrl: '',
        viewImgUrl: '',
        currentFileType: '',
      };
    },
    methods: {
      openViewHandler(rowItem) {
        console.log(rowItem, '预览');
        const url = rowItem.attachmentPath;
        const fileExtname = path.extname(rowItem.attachmentName);
        if (['.docx', '.doc'].includes(fileExtname)) {
          this.fileDialogVisible = true;
          this.currentFileType = 'docx';
          this.renderWord(url);
        } else if (['.xlsx', '.xls'].includes(fileExtname)) {
          this.fileDialogVisible = true;
          this.currentFileType = 'xlsx';
          this.renderExcel(url);
        } else if (['.pdf'].includes(fileExtname)) {
          this.fileDialogVisible = true;
          this.currentFileType = 'pdf';
          this.renderPdf(url);
        } else if (['.png', '.gif', '.jpeg', '.jpg'].includes(fileExtname)) {
          this.fileDialogVisible = true;
          this.currentFileType = 'img';
          this.viewImgUrl = url;
        } else {
          this.$message.warning('当前文件不支持预览');
          window.open(url, '_blank');
        }
      },
      // 渲染pdf数据
      renderPdf(url) {
        this.pdfUrl = pdf.createLoadingTask(url);
      },
      // 渲染word数据
      renderWord(url) {
        axios({
          method: 'get',
          responseType: 'blob',
          url: url,
        }).then(({ data }) => {
          console.log(data);
          docx.renderAsync(data, this.$refs.file); // 渲染到页面
        });
      },
      // 请求excel表格数据的
      renderExcel(url) {
        axios({
          method: 'get',
          responseType: 'arraybuffer',
          url: url,
        }).then(({ data }) => {
          var workbook = XLSX.read(data, {
            type: 'array',
          });
          this.tableToHtml(workbook);
        });
      },
      // 渲染excel表格数据
      tableToHtml(workbook) {
        var worksheet = workbook.Sheets[workbook.SheetNames[0]];
        // const data = XLSX.utils.sheet_to_json(worksheet);
        // console.log(data, '表格数据');
        // this.excelData = data;
        var innerHTML = XLSX.utils.sheet_to_html(worksheet);
        this.tableHtml = innerHTML;
      },
    },
    components: {
      pdf,
    },
  };
</script>

<style lang="scss" scoped>
  // excel表格样式
  .table-html-wrap ::v-deep table {
    border-right: 1px solid #e8eaec;
    border-bottom: 1px solid #e8eaec;
    border-collapse: collapse;
    margin: auto;
  }
  .table-html-wrap ::v-deep table td {
    border-left: 1px solid #e8eaec;
    border-top: 1px solid #e8eaec;
    white-space: wrap;
    text-align: left;
    min-width: 100px;
    padding: 4px;
  }
</style>
